<template>
	<z-paging ref="paging" v-model="indexList" @query="queryList" :show-loading-more-no-more-view="false">
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('addressbook.friend_black.title')"></cl-navbar>
			<view class="searchview">
				<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#ffffff" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
			</view>
		</template>

		<view :key="index" v-for="(item, index) in searchlist">
			<view class="listitem">
				<view class="listitem__centent">
					<view class="listitem__centent__left">
						<cl-avatar :src="item.blocked_info.avatar_url" size="100rpx"></cl-avatar>
					</view>
					<view class="listitem__centent__right">
						<view class="listitem__centent__right__top">
							<text class="listitem__centent__right__top__nickname">{{item.blocked_info.nick_name}}</text>
						</view>
					</view>
				</view>
				<view class="listitem__controls" @click="yichu(item)">移除</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import friendsBlackApi from "@/services/api/friendsBlack.js"
	export default {
		name: 'friend_black',
		data() {
			return {
				indexList: [],
				searchval:''
			}
		},
		computed: {
			searchlist(){
				let newdata = this.indexList.filter(item => {
					// 根据名字筛选
					if (this.searchval && item.blocked_info && item.blocked_info.nick_name.indexOf(this.searchval) === -1) {
						return false;
					}
					return true;
				});
				return newdata
			}
		},
		onLoad() {},
		methods: {
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			async queryList(pageNo, pageSize) {
				try {
					let res = await friendsBlackApi.blackList({
						page: pageNo,
						limit: pageSize,
						orderby: "black_id",
						sort: "desc"
					})
					console.log(res);
					if (res) {
						this.$refs.paging.complete(res.list)
					} else {
						this.$refs.paging.complete(false)
					}
				} catch (e) {
					this.$refs.paging.complete(false)
				}
			},
			async yichu(item){
				console.log(item);
				try{
					let resapi = await friendsBlackApi.undock(item.blocked_info.user_id)
					if(resapi){
						let index = this.indexList.findIndex(it=>it.blocked_info.user_id == item.blocked_info.user_id)
						if(index != -1){
							this.indexList.splice(index,1)
						}
					}
				}catch(e){}
			}
		},
	};
</script>

<style scoped lang="scss">
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #ffffff;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}

	.listitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		position: relative;

		&__centent {
			display: flex;
			align-items: center;

			&__right {
				margin-left: 20rpx;
				flex: 1;

				&__top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&__nickname {
						font-size: 28rpx;
					}

					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}

				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
		&__controls{
			display: flex;
			flex-direction: column;
			padding: 15rpx 0;
			background: linear-gradient(to right, #ff5b7a, #ff7a3d);
			border-radius: 30rpx;
			font-size: 25rpx;
			color: #ffffff;
			width: 128rpx;
			text-align: center;
		}

	}
</style>